<template>
  <section class="record-cons">
    <div class="list-wrapper">
      <div
        class="record-con-div"
        v-for="item in list"
        :key="item.id"
      >
        <img :src="item.pictureUrl || defaultHeader" />
        <div class="record-con">
          <div class="user-name">{{item.createdName}}</div>
          <div class="con-detail" v-html="item.content"></div>
          <div class="record-time">{{item.createTime | moment('MM-DD HH:mm')}}</div>
        </div>
      </div>
    </div>
    <div v-if="list.length" class="load-more" @click="loadMore">
      {{isMore ? '加载更多' : ''}}
    </div>
    <div v-if="!list.length" class="none-log">暂无动态</div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      defaultHeader: '../../../../src/assets/image/customerDefault.png',
      queryModel: {
        pageSize: 10,
        pageNo: 1,
        param: {
          objId: this.id,
          type: this.type
        }
      },
      total: 0,
      isMore: true
    }
  },
  props: {
    id: {
      type: [String, Number],
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  watch: {
    id (val) {
      this.queryModel.param.objId = val
      this.list = []
      this.queryModel.pageNo = 1
      this.isMore = true
      this.total = 0
      this.fetch()
    },
    type (val) {
      this.queryModel.param.type = val
    },
    status () {
      this.list = []
      this.fetchData()
    }
  },
  computed: {
    status () {
      return this.$store.state.user.record
    }
  },
  methods: {
    fetch () {
      if (!this.queryModel.param.objId || !this.queryModel.param.objId) return
      this.$store.dispatch('COMMON_LOG_LIST', this.queryModel).then(res => {
        if (res.success) {
          this.list = this.list.concat(res.data.list)
          this.total = this.total > 0 ? this.total : res.data.totalCount
          if (this.list.length >= this.total) {
            this.isMore = false
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    fetchData () {
      this.total = 0
      this.fetch()
    },
    loadMore () {
      if (!this.isMore) return
      this.queryModel.pageNo += 1
      this.fetch()
    }
  },
  mounted () {
    this.fetch()
  }
}
</script>

<style lang="scss">
  .record-cons{
    max-height: 700px;
    overflow-y: auto;
    .record-con-div{
      display: flex;
      zoom: 1;
      padding: 16px 0;
      border-bottom: 1px solid #EFEFEF;
      img{
        display: block;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border-radius: 7px;
        margin-right: 15px;
      }
      .record-con{
        flex: 1;
        .user-name{
          font-size: 14px;
          line-height: 14px;
          color: #333333;
          margin-bottom: 12px;
        }
        .con-detail{
          font-size: 12px;
          line-height: 150%;
          color: #999999;
          word-break: break-all;
          margin-bottom: 9px;
        }
        .record-time{
          font-size: 12px;
          line-height: 12px;
          color: #CCCCCC;
        }
      }
    }
    .load-more{
      color: #ccc;
      text-align: center;
      font-size: 14px;
      cursor: pointer;
    }
    .load-more:active{
      color: #ddd;
    }
    .record-con-div:first-child{
      padding-top: 0;
    }
    .record-con-div:last-child{
      border: none;
    }
    .none-log{
      color: #ccc;
      text-align: center;
      font-size: 14px;
    }
  }
</style>
